<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 字符编码声明：UTF-8支持全球几乎所有语言字符 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 响应式视图配置：确保移动设备按设备宽度渲染，初始缩放比1:1 -->
    <title>HTML表格与表单标签示例</title>
    <style>
        /* 全局样式：统一页面基础样式，提升可读性 */
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0 auto;
            max-width: 1000px;
            padding: 20px;
        }

        /* 布局容器：使用Grid实现表格与表单的两栏布局 */
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }

        /* 表格样式：统一表格边框、内边距和表头背景 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }

        /* 表单样式：美化表单容器、输入框和按钮 */
        form {
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 5px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select, textarea {
            width: 100%;
            padding: 8px;
            box-sizing: border-box; /* 确保padding不撑大元素宽度 */
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        /* 按钮样式：区分提交和重置按钮的颜色 */
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button[type="reset"] {
            background-color: #f44336;
            margin-left: 10px;
        }

        /* 响应式适配：屏幕宽度≤768px时，布局改为单栏 */
        @media (max-width: 768px) {
            .container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <h1>HTML表格与表单标签演示</h1>

    <!-- 主体内容容器：表格与表单两栏布局 -->
    <div class="container">
        <!-- 表格部分：按功能拆分不同类型表格 -->
        <div class="table-section">
            <h2>一、表格标签示例</h2>

            <!-- 1. 基本表格：展示基础表格结构（表头+数据行） -->
            <h3>1.1 基本表格</h3>
            <!-- 
                核心标签说明：
                - table：定义表格容器
                - tr：定义表格行（table row）
                - th：定义表头单元格（table header），默认加粗居中
                - td：定义数据单元格（table data）
            -->
            <table>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>职业</th>
                </tr>
                <tr>
                    <td>张三</td>
                    <td>28</td>
                    <td>工程师</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>32</td>
                    <td>设计师</td>
                </tr>
                <tr>
                    <td>王五</td>
                    <td>45</td>
                    <td>经理</td>
                </tr>
            </table>

            <!-- 2. 合并单元格表格：展示colspan（列合并）和rowspan（行合并） -->
            <h3>1.2 带合并单元格的表格</h3>
            <table>
                <tr>
                    <th colspan="3">员工薪资表</th> <!-- colspan="3"：合并3列 -->
                </tr>
                <tr>
                    <th>部门</th>
                    <th>职位</th>
                    <th>薪资范围</th>
                </tr>
                <tr>
                    <td rowspan="2">技术部</td> <!-- rowspan="2"：合并2行 -->
                    <td>前端开发</td>
                    <td>8k-15k</td>
                </tr>
                <tr>
                    <td>后端开发</td>
                    <td>10k-20k</td>
                </tr>
                <tr>
                    <td rowspan="2">设计部</td> <!-- 合并2行 -->
                    <td>UI设计</td>
                    <td>7k-14k</td>
                </tr>
                <tr>
                    <td>UX设计</td>
                    <td>9k-18k</td>
                </tr>
            </table>

            <!-- 3. 结构化表格：使用thead/tbody/tfoot增强语义，便于样式控制和脚本操作 -->
            <h3>1.3 结构化表格</h3>
            <!-- 
                语义化标签说明：
                - thead：表格表头区域，通常包含列标题
                - tbody：表格主体区域，包含核心数据行
                - tfoot：表格页脚区域，通常包含汇总数据（如总计）
            -->
            <table>
                <thead>
                    <tr>
                        <th>产品</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>小计</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>笔记本电脑</td>
                        <td>5999</td>
                        <td>2</td>
                        <td>11998</td>
                    </tr>
                    <tr>
                        <td>鼠标</td>
                        <td>99</td>
                        <td>5</td>
                        <td>495</td>
                    </tr>
                    <tr>
                        <td>键盘</td>
                        <td>199</td>
                        <td>3</td>
                        <td>597</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="3">总计</th>
                        <th>13090</th>
                    </tr>
                </tfoot>
            </table>
        </div>

        <!-- 表单部分：按输入类型分组，增强语义和可维护性 -->
        <div class="form-section">
            <h2>二、表单标签示例</h2>

            <!-- 表单容器：action指定提交地址，method指定提交方式 -->
            <form action="#" method="post">
                <!-- 1. 文本输入：用户名（必填） -->
                <div class="form-group">
                    <label for="username">用户名：</label>
                    <!-- 
                        input属性说明：
                        - type="text"：单行文本输入
                        - id：与label的for关联，点击标签聚焦输入框（增强可访问性）
                        - name：提交时的参数名（后端接收的键）
                        - required：标记为必填项，浏览器自动校验
                        - placeholder：输入提示文本
                    -->
                    <input 
                        type="text" 
                        id="username" 
                        name="username" 
                        required 
                        placeholder="请输入用户名"
                    >
                </div>

                <!-- 2. 邮箱输入：自带邮箱格式校验 -->
                <div class="form-group">
                    <label for="email">邮箱：</label>
                    <input 
                        type="email" 
                        id="email" 
                        name="email" 
                        required 
                        placeholder="请输入邮箱地址"
                    >
                </div>

                <!-- 3. 密码输入：输入内容隐藏 -->
                <div class="form-group">
                    <label for="password">密码：</label>
                    <input 
                        type="password" 
                        id="password" 
                        name="password" 
                        required 
                        placeholder="请输入密码"
                    >
                </div>

                <!-- 4. 单选按钮组：name相同表示同一组，只能选一个 -->
                <div class="form-group">
                    <label>性别：</label>
                    <input type="radio" id="male" name="gender" value="male" checked>
                    <label for="male">男</label>

                    <input type="radio" id="female" name="gender" value="female">
                    <label for="female">女</label>
                </div>

                <!-- 5. 复选框：可多选，name相同表示同一组 -->
                <div class="form-group">
                    <label>兴趣爱好：</label>
                    <input type="checkbox" id="hobby1" name="hobby" value="reading">
                    <label for="hobby1">阅读</label>

                    <input type="checkbox" id="hobby2" name="hobby" value="sports">
                    <label for="hobby2">运动</label>

                    <input type="checkbox" id="hobby3" name="hobby" value="music">
                    <label for="hobby3">音乐</label>
                </div>

                <!-- 6. 下拉选择框：提供预设选项 -->
                <div class="form-group">
                    <label for="education">学历：</label>
                    <select id="education" name="education">
                        <option value="">请选择</option>
                        <option value="highschool">高中</option>
                        <option value="college">专科</option>
                        <option value="bachelor" selected>本科</option> <!-- selected：默认选中 -->
                        <option value="master">硕士</option>
                        <option value="phd">博士</option>
                    </select>
                </div>

                <!-- 7. 多行文本输入：用于长文本（如简介、备注） -->
                <div class="form-group">
                    <label for="message">个人简介：</label>
                    <textarea 
                        id="message" 
                        name="message" 
                        rows="4" 
                        placeholder="请输入个人简介"
                    ></textarea>
                </div>

                <!-- 8. 日期选择：自带日期选择器（浏览器原生） -->
                <div class="form-group">
                    <label for="birthday">出生日期：</label>
                    <input type="date" id="birthday" name="birthday">
                </div>

                <!-- 9. 文件上传：支持选择本地文件 -->
                <div class="form-group">
                    <label for="avatar">上传头像：</label>
                    <input 
                        type="file" 
                        id="avatar" 
                        name="avatar" 
                        accept="image/*" <!-- accept：限制仅上传图片类型 -->
                    >
                </div>

                <!-- 表单按钮：提交（submit）和重置（reset） -->
                <button type="submit">提交</button>
                <button type="reset">重置</button>
            </form>
        </div>
    </div>
</body>
</html>